<template>
  <div class="hello">
    <div ref="chart" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import yourGuangdongGeoJson from '../json/gzs-lwq.json';
export default {
  name: 'HelloWorld',
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      this.loadMapData();
    },
    loadMapData() {
      // 加载广东省及广州市地图数据
      echarts.registerMap('guangdong', yourGuangdongGeoJson); // 这里需要替换为实际的广东地图JSON数据


      const option = {
        tooltip: { // 配置提示框
          trigger: 'item', // 触发类型：当前数据项触发
          // formatter: params => `${params.name}: ${params.data.value}`, // 提示框内容格式器
          formatter: params => {
            if (params.data) {
              return `${params.name}: ${params.data.value}`;
            } else {
              return '无数据';
            }
          },
        },
        // toolbox: { // 配置工具箱
        //   show: true, // 是否显示工具箱
        //   orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
        //   left: 'right', // 工具箱的位置
        //   top: 'center',
        //   feature: {
        //     dataView: {}, // 数据视图
        //     restore: {}, // 恢复
        //     saveAsImage: {}, // 保存为图片
        //   },
        // },
        // backgroundColor: '#8ff2f7',
        series: [
          {
            type: 'map',
            itemStyle: {
              normal: {
                areaColor: '#fff', // 设置默认状态下非选中区域的颜色
              },
              emphasis: {
                areaColor: '#8ff2f7', // 设置鼠标悬浮或点击时高亮区域的颜色
              },
              selected: { // 设置选中状态下的样式
                areaColor: '#f398d1', // 设置选中区域的颜色
              },
            },
            mapType: 'guangdong', // 使用注册的地图类型
            roam: true, // 开启鼠标缩放和平移漫游
            selectedMode: 'single', // 设置单选模式，也可以是'multiple'表示多选
            data: [ // 地图区域的数据，比如之前提到的广州市等地区数据
              { name: '天河区', value: 1, selected: true },
              { name: '黄埔区', value: 2, },
              { name: '越秀区', value: 3, },
            ],
            tooltip: { // 如果希望每个系列有自己的tooltip配置，可以在这里单独设置
              // formatter: params => `Series Tooltip: ${params.name} - Value: ${params.data.value}`,
              formatter: params => {
                if (params.data) {
                  return `Series Tooltip: ${params.name} - Value: ${params.data.value}`;
                } else {
                  return '无数据';
                }
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    }
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose(); // 销毁图表，防止内存泄漏
    }
  },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
